<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>对外宣传管理</title>
		<link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
	
		<!-- js插件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="asserts/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="asserts/bootstrapValidate/css/bootstrapValidator.min.css"/>
 	   <script src="asserts/bootstrapValidate/js/bootstrapValidator.min.js"></script>
	
	</head>
	<body>
			<!-- 内容展示区 -->
			<div >
					<!-- 导航 -->
					<ol class="breadcrumb">
						<li><i class="fa fa-comment"></i> 对外宣传管理</li>
					</ol>
					<div class="container-fluid">
						<!-- 	内容面板 -->
						<div class="panel panel-default">
							<!-- 控制按钮 -->
							<div class="panel-heading">
									<div class="btn-group">
										<button class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span>添加</button>
										<button class="btn btn-success"><span class="glyphicon glyphicon-import"></span>导入excel</button>
										<button class="btn btn-info"><span class="glyphicon glyphicon-export"></span>导出excel模板</button>
									</div>
							</div><!-- 控制按钮  end-->
							<div class="panel-body">
								<table class="table table-bordered table-striped">
									<tr>
										<th width="5%"><input type="checkbox" name="" id="selectAll" /></th>
										<th width="5%">ID</th>
										<th width="10%">媒体名称</th>
										<th width="10%">媒体分类</th>
										<th width="10%">期刊等级</th>
										<th width="10%">报道标题</th>
										<th width="10%">刊号</th>
										<th width="5%">期数</th>
										<th width="5%">版面/页面</th>
										<th width="5%">网址链接</th>
										<th width="5%">发布时间</th>
										<th width="5%">缩略图</th>
										<th width="30%">操作</th>
									</tr>
									<!-- 数据绑定 -->
									<tr>
										<td><input type="checkbox" name="" class="eid" id="" /></td>
										<td>1</td>
										<td>网页媒体</td>
										<td>公众号</td>
										<td>省级</td>
										<td>报道我和我的祖国</td>
										<td>2刊</td>
										<td>3</td>
										<td>2</td>
										<td>链接</td>
										<td>2019-10-01</td>
										<td><img src="img/headicon/p1.jpg" width="50px" height="50px"
											onclick="showimage('img/headicon/p1.jpg')"
											onmouseover="this.style.cursor='pointer';this.style.cursor='hand'"
										 onmouseout="this.style.cursor='default'"
										data-toggle="modal" data-target="#ShowImage_Form" /></td>
										<td>
											<button type="button" class="btn btn-primary" 
												data-toggle="modal" data-target="#mymodal" >
												 <span class="glyphicon glyphicon-edit"></span> 修改</button>
											 <button type="button" class="btn btn-danger"> 
											 	<span class="glyphicon glyphicon-remove"></span> 删除</button>
											  
										</td>
									</tr>
											
									 
									<!-- 	数据绑定 end -->
								</table>
								<!-- 	分页 -->
									<nav class="text-center">
									<ul class="pagination pagination-sm">
										<li class="disabled"><a href="javascript:void(0)">&laquo;</a></li>
										<li class="active"><a href="">1</a></li>
										<li><a href="">2</a></li>
										<li><a href="">3</a></li>
										<li><a href="">...</a></li>
										<li><a href="">49</a></li>
										<li><a href="">50</a></li>
										<li><a href="">&raquo;</a></li>
									</ul>
									</nav>
							</div>
						</div><!-- 内容面板 end -->
					</div>
			</div><!-- 	内容展示区 end-->
	 
		
		<!-- 弹层组件 添加标签 -->
		<div class="modal fade" id="mymodal">
			<div class="modal-dialog">
				<div class="modal-content">
					<form action=""  class="form-horizontal">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
							<h4 class="modal-title" id="mylabel">录入信息</h4>
						</div>
						<div class="modal-body">
							  
							  <!-- 学校-->
								<div class="form-group">
									<label class="control-label col-md-3">媒体名称：</label>
									<div class="col-md-8">
										<input type="text" name="medianame" placeholder="请输入媒体名称" class="form-control"  />
									</div>
								</div>
								  <!-- 学校-->
								<div class="form-group">
									<label class="control-label col-md-3">媒体分类：</label>
									<div class="col-md-8">
										<select name="mediatype" class="form-control">
											<option value="">请选择</option>
											<option value="网页">网页</option>
											<option value="公众号">公众号</option>
											<option value="报刊">报刊</option>
											<option value="杂志">杂志</option>
											<option value="期刊">期刊</option>
										</select>
									</div> 
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">期刊等级：</label>
									<div class="col-md-8">
										<select name="level" class="form-control">
											<option value="">请选择</option>
											<option value="国家级">国家级</option>
											<option value="省级">省级</option>
											<option value="市级">市级</option>
											<option value="县级">县级</option>
										</select> 
									</div> 
								</div> 
						 
							  	<div class="form-group">
									<label class="control-label col-md-3">报道标题：</label>
									<div class="col-md-8">
										<input type="text" name="title" placeholder="请输入报道标题" class="form-control"  />
									</div>
								</div>
									<div class="form-group">
									<label class="control-label col-md-3">刊号：</label>
									<div class="col-md-8">
										<input type="text" name="titleno" placeholder="请输入刊号（数字）" class="form-control"  />
									</div>
								</div>
									<div class="form-group">
									<label class="control-label col-md-3">第几期：</label>
									<div class="col-md-8">
										<input type="text" name="num" placeholder="请输入第几期（如第三期，输入3）" class="form-control"  />
									</div>
								</div>
									<div class="form-group">
									<label class="control-label col-md-3">版面/页面：</label>
									<div class="col-md-8">
										<input type="text" name="page" placeholder="请输入版面/页面" class="form-control"  />
									</div>
								</div>
									<div class="form-group">
									<label class="control-label col-md-3">网址链接：</label>
									<div class="col-md-8">
										<input type="text" name="url" placeholder="请输入网址链接" class="form-control"  />
									</div>
								</div>
									<div class="form-group">
									<label class="control-label col-md-3">缩略图：</label>
									<div class="col-md-8">
										<input type="file" name="file"/>
									</div>
								</div>
									 
						</div>
						<div class="modal-footer">
							<button class="btn btn-danger" type="button" data-dismiss="modal">关闭</button>
							<button class="btn btn-primary" type="submit">录入</button>
						</div>
					</form>
				</div>
			</div>
		</div><!-- 弹层组件 添加标签 end -->
	 
	  <!-- 显示图片的 model -->
	  <div id="ShowImage_Form" class="modal fade">         
	         <div class="modal-header">
	             <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
	         </div>
	          <div class="modal-body">
	           	 <div id="img_show">
	           	 	 
	           	 		 
	            </div>
	         </div>
        </div>
        
        
	</body>
</html>
<script>
	 $(function () {
	  
        $('form').bootstrapValidator({
　　　　　　　　message: 'This value is not valid',
            　feedbackIcons: {
                　　　　　　　　valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'
            　　　　　　　　   },
            fields: {
                medianame: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '媒体名称不能为空'
                        }
                    }
                },
                mediatype: {
                    validators: {
                        notEmpty: {
                            message: '媒体类型不能为空'
                        }
                    }
                },
                level: {
                    validators: {
                        notEmpty: {
                            message: '期刊等级不能为空'
                        }
                    }
                },
                title: {
                    validators: {
                        notEmpty: {
                            message: '报道标题不能为空'
                        }
                    }
                },
                file: {
                    validators: {
                        notEmpty: {
                            message: '缩略图不能为空'
                        }
                    }
                }
            } ,
            submitHandler: function (validator, form, submitButton) {
              // alert("submit");
            }
        });
    });
	
 
	function showimage(source)
     {
     	 
          $("#ShowImage_Form").find("#img_show").html("<center><img src='"+source+"' class='img-responsive img-rounded' /></center>");
        // $("#ShowImage_Form").modal(); 
     }
	
</script>
